// 主体部分的样式
main{
    overflow-y: scroll;
}
.swiper-box{
    // width: 100%;
    height: 200px;
}
.swiper{
    width: 100%;
    height: 100%;
}
.swiper img{
    width: 100%;
    height: 100%;
    text-align: center;
}
//中间内容部分的样式
.content{
    padding:20px 10px;
    font-size: 16px;
    div{
        border-radius: 10px;
    }
}
.rank{
    width:43%;
    height: 140px;
    font-weight: bold;
    background:rgba(21, 146, 204, .7) url(../img/index-card-rank.png) no-repeat left 20px;
    background-size: 110px;
    padding:10px;

    p{
        color: #004e73;
        font-size: 20px;
}
    #rankNum{
        font-size: 70px;
        color:#fff;
        width: 100%;
        text-align: right;
    }

}
.sum{
    width:53%;
    height: 140px;
    padding: 10px;
    color: #004e73;
    font-weight: bold;

    background:#9fd9f8 url(../img/index-card-sum.png) no-repeat 10px 20px;
    background-size: 110px;
    p{
        font-size: 20px;
    }
    div{
        width: 100%;
        margin-top: 50px;
        text-align: right;
    
    #sumNum{
        width: 100px;
        height: 40px;
        border-radius: 20px;
        border:2px solid #004e73;
        line-height: 37px;
        text-align: center;
        display: inline-block;
    }
}
}
.exercise{
    width:48%;
    height: 110px;
    padding:10px;
    color:#fff;
    font-weight: bold;
    background: url(../img/index-card-data.png) no-repeat center;
}
.badge{
    width:48%;
    height: 110px;
    color:#004e73;
    font-weight: bold;
    background:#9dbde3 url(../img/index-card-badge.png) no-repeat 10px 20px;
    background-size: 100px;
    padding: 10px;
    p:last-child{
        text-align: right;
    }
    #badgeNum{
        font-size: 70px;
    }
}
.train,.outdoor{
    width: 100%;
    height: 110px;
    color:#fff;
    padding:10px;
    font-weight:bold;
}
.train{
    background: url(../img/course-img04.jpg) no-repeat center;
}
.outdoor{
    background: url(../img/course-img02.png) no-repeat center;
}
